<!doctype html>
<html>
  <head>
    <title>Get Started with KetcherRails</title>
  </head>
  <body>
    <div style="width:80%;padding:0px;margin:auto;">
      <div>
        <iframe width="80%" height="800" id="ifKetcher" src="/ketcher"></iframe>
      </div>

      <script>
        function ketcher() {
          const ketcherFrame = document.getElementById('ifKetcher');
          if (ketcherFrame && ('contentDocument' in ketcherFrame)) {
            return ketcherFrame.contentWindow.ketcher;
          }
          return document.frames['ifKetcher'].window.ketcher;
        };
        function getSVG() {
          document.getElementById("result").innerHTML =  ketcher().getSVG();
        };
        function getMolfile() {
          document.getElementById("result").innerHTML = ketcher().getMolfile();
        };
        function setMolfile() {
          const molfile = "\n  Ketcher 06271817312D 1   1.00000     0.00000     0\n\n  3  3  0     0  0            999 V2000\n    1.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.5000   -0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  1  0     0  0\n  2  3  1  0     0  0\n  1  3  1  0     0  0\nM  END\n$$$$\n"
          ketcher().setMolecule(molfile);
        };
      </script>

      <button onclick="getSVG()">get SVG</button>
      <button onclick="getMolfile()">get Molfile</button>
      <button onclick="setMolfile()">Draw cyclopropane</button>
      <br/>
      <textarea id='result' rows="20" cols="50">
      </textarea>
    </div>
  </body>
</html>
